<template>
  <div>
    <div class="commodity">
      <h1>品类管理--添加品类</h1>
    </div>

    <el-form ref="form" :model="form" label-width="80px" class="form">
      <el-form-item label="所属品类">
        <el-select v-model="form.value" placeholder="/所有">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in list"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品类名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" class="btn" @click="submit">提交</el-button>
  </div>
</template>

<script>
import { kind, kindAdd } from "@/utils/api";
export default {
  data() {
    return {
      form: {
        name: "",
        value: ""
      },
      list: []
    };
  }, //方法

  methods: {
    submit() {
      if (this.form.name.length == 0) {
        alert("请输入品类名称");
        return;
      }

      kindAdd(this.form.value, this.form.name).then(res => {
        console.log(res);
        if (res.data.status == 0) {
          this.page();
          alert("添加成功");
          this.$router.push("/kind");
        }
      });
    },
    page() {
      kind(0).then(res => {
        console.log(res);
        this.list = res.data.data;
        this.list.unshift({
          id: "",
          name: "所有"
        });
      });
    }
  },

  mounted() {
    this.page();
  }
};
</script>

<style lang="scss" scoped>
.btn {
  margin-left: 210px;
}
.form {
  width: 400px;
  margin: 20px 0 0 130px;
}
.commodity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1260px;
  height: 50px;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
  h1 {
    font-size: 25px;
  }
}
</style>
